<template>
    <div>
      <el-descriptions title="房子详细信息">
        <el-descriptions-item label="状态">
          <el-tag size="small">{{house.status}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="租金">
          <el-tag size="small">${{house.monthrent}}/月</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="房产证编号">
          <el-tag size="small">{{house.number}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="卧室数量">
          <el-tag size="small">{{house.bedroomnum}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="卫生间数量">
          <el-tag size="small">{{house.toiletnum}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="厨房数量">
          <el-tag size="small">{{house.kichennum}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="客厅数量">
          <el-tag size="small">{{house.livingroomnum}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="房屋面积">
          <el-tag size="small">{{house.area}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="是否有空调">
          <el-tag size="small">{{house.hasairconditioner}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="建成年份">
          <el-tag size="small">{{house.buildyear}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="朝向">
          <el-tag size="small">{{house.direction}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="楼层">
          <el-tag size="small">{{house.floor}}/{{house.maxfloor}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="是否有电梯">
          <el-tag size="small">{{house.haselevator}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="入住开始时间">
          <el-tag size="small">{{house.lastorderstart}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="入住结束时间">
          <el-tag size="small">{{house.lastendtime}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系人姓名">
          <el-tag size="small">{{house.contactname}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系人手机号">
          <el-tag size="small">{{house.contactphone}}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-descriptions title="详情描述">
        <el-descriptions-item>优质好房,值得入住!!!!</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <div class="block">
        <span class="demonstration">房间图片展示</span>
        <el-carousel height="300px">
          <el-carousel-item v-for="item in urls">
            <img :src="item" class="image" style="width: 100%;height: 100%">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
</template>

<script>
    export default {
      name: "DetailLeft",
      data() {
        return {
          house:{
            status:'',//状态
            monthrent:'',//月租费用
            number:'',//房产证号
            bedroomnum:'',//厕所个数
            toiletnum:'',//卫生间个数
            kichennum:'',//厨房个数
            livingroomnum: '',//客厅个数
            area:'',//房屋面积
            hasairconditioner:'',//是否有空调
            buildyear:'',//建成年份
            direction:'',//朝向
            floor:'',//楼层
            maxfloor:'',//最高楼层
            haselevator:'',//是否有电梯
            lastorderstart:'',//上次入住开始时间
            lastendtime:'',//上次入住结束时间
            contactname:'',//联系人姓名
            contactphone:''//联系人电话
          },
          urls:[

          ]
        };
      },
      mounted(){
        this.loadAll();
      },
      methods:{
        loadAll(){
          this.request.get('http://localhost:8083/oneHouse',{
            params:{
              id:1
            }
          }).then(res=>{
            console.log(res);
            this.house = res.date;
            this.urls = res.date.slideurl.split(",");
          })
        }
      }
    }
</script>

<style scoped>

</style>
